<template>
    <!--原创精品-->
    <div class="book-type-two">
        <div class="book-type-two-title">
            <span class="i-font-color"></span>
            <div><span>原创精品</span></div>
            <div><a href="">更多</a></div>
        </div>
        <div class="book-type-two-list">
            <Loading v-show="isLoading"/>
            <router-link :to="{name:'BookInfo',params:{book_id:item.id}}" class="book-type-two-detail" v-for="item in bookListTwo" :key="item.id">
                <img src="../assets/book/images/list1.jpg" alt="">
                <div class="book-type-two-detail-descr">
                    <div>{{item.descr.slice(0,58)}}……</div>
                    <div>
                        <span>{{item.pv}}浏览</span>
                        <span>{{item.cate.name}}</span>
                    </div>
                </div>
            </router-link>

        </div>
    </div>
</template>

<script>
    import {getBookList} from "../service/getData";
    import Loading from '../components/loadding';
    export default {
        // name: "bookListTwo",
        components:{
            Loading
        },
        data(){
            return {
                bookListTwo:[],
                isLoading: true
            }
        }
       /* ,computed:{
            showBookListTwo(){
                return this.bookListTwo.slice(0,9)
            }
        }*/
       ,async created() {
            this.isLoading = true;
           let response =  await getBookList(2);
           // console.log(response.data);
           this.bookListTwo = response.data
            this.isLoading = false;
        }
    }
</script>

<style scoped>
    /*第二种书籍类型*/
    .book-type-two{
        margin-top: 0.5rem;
        background-color: white;
    }
    .book-type-two-title{
        padding: 0.8rem 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    .book-type-two-title > div > span{
        font-size: 1.2rem;
        font-weight: bold;
        margin-left: 2rem;
    }
    .book-type-two-title > div > a{
        margin-right: 2rem;
    }
    .book-type-two-list{
        display: flex;
        flex-flow: column nowrap;
        padding: 0.3rem 0.6rem;
    }
    .book-type-two-detail{
        background-color: rgba(249, 249, 249, 0.62);
        margin-bottom: 0.6rem;
        display: flex;
    }
    .book-type-two-detail > img {
        width:20%;
    }
    .book-type-two-detail-descr{
        margin: 0.3rem 0.3rem 0 0.6rem;
        display: flex;
        flex-flow: column nowrap;
    }
    .book-type-two-detail-descr > div{
        font-size: 0.9rem;
        color: #1d2026;
    }
    .book-type-two-detail-descr > div:last-of-type{
        /* margin-top: auto;
         margin-left: auto;*/
        margin:auto 0.2rem 0.1rem auto;
        /*display: flex;*/
        /*flex-flow: row nowrap;*/
        /*justify-content: start;*/
    }
    .book-type-two-detail-descr > div:last-of-type > span:last-of-type{
        font-size: 0.5rem;
        color: #e55b06;
        margin-left: 1rem;
    }
    .book-type-two-detail-descr > div:last-of-type > span:first-of-type{
        font-weight: bold;
        /*display: flex;*/
        /*flex-flow: column;*/
        /*justify-content: start;*/
    }
</style>